import React, { useState, useEffect } from "react";
import { get, post, put } from "../../../util/request"
import { Form, Card, Input, Button, message, Upload, Icon  } from "antd";
const { TextArea } = Input;

function Edit(props) {
  // console.log(props);
  // props.match.params.id 存在的话表示修改，否怎为新增



  const { getFieldDecorator } = props.form;
  const [crdata, setData] = useState({
    "name": "",
    "labels": "",
    "kubeconfig": ""
  });
  useEffect(() => {
    console.log(props.match.params.id)
    if (props.match.params.id != undefined) {
      get("/v1/credentials/get", { "name": props.match.params.id }).then(response => {
        console.log(response)
        response.data.data["labels"] = JSON.stringify(response.data.data["labels"])
        setData(response.data.data)
      })
    }
  }, []);



  const handleSubmit = e => {
    // editorState.toHTML()获取当前富文本的内容
    // console.log(editorState.toHTML());
    e.preventDefault();
    //  验证
    props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        console.log(values)
        console.log("提交")
        values["labels"] = JSON.parse(values["labels"])
        if (props.match.params.id != undefined) {
          //修改接口 
          put("/v1/credentials/put", values).then(res => {
            message.success("修改成功")
            console.log(res)
          }).catch(err => {
            message.error("修改失败"+err)
            console.log(err)
          })

        } else {
          // 新增接口
          post("/v1/credentials/post", values).then(res => {
            message.success("添加成功")
            console.log(res)
          }).catch(err => {
            message.success("添加失败"+err)
            console.log(err)
          })
        }
      } else {
        message.error("请输入正确内容")
      }

    });
  };
  return (
    <Card
      title="凭证编辑"
      extra={
        <Button onClick={() => props.history.push("/admin/credential")}>
          返回
        </Button>
      }
    >
      <Form onSubmit={e => handleSubmit(e)}>
        <Form.Item label="名字" >
          {getFieldDecorator("name", {
            rules: [
              {
                required: true,
                message: "请输入凭证名字"
              }
            ],
            initialValue: crdata.name
          })(<Input placeholder="请输入凭证名字" />)}

        </Form.Item>
        <Form.Item label="标签">
          {getFieldDecorator("labels", {
            rules: [
              {
                required: true,
                message: "请输入凭证标签"
              }
            ],
            initialValue: crdata.labels
          })(<TextArea rows={5} placeholder="请输入凭证标签" />)}
        </Form.Item>

        <Form.Item label="凭证信息">
          {getFieldDecorator("kubeconfig", {
            rules: [
              {
                required: true,
                message: "请输入凭证信息"
              }
            ],
            initialValue: crdata.kubeconfig
          })(<TextArea rows={10} placeholder="请输入凭证信息" />)}
        </Form.Item>

        <Form.Item>
          <Button htmlType="submit" type="primary">
            保存
          </Button>
        </Form.Item>
      </Form>
    </Card>
  );
}

export default Form.create({ name: "productEdit" })(Edit);
